<template>
  <view class="obj" v-if="isShow">
    <u-modal :show-cancel-button="true" v-model="show" @confirm="confirm" @cancel="show = false" :content="content"></u-modal>
    <view class="avatar">
      <u-avatar :src="obj.avatar" size="140"></u-avatar>
    </view>
    <view class="name">
      {{ name }}名：{{ obj.name }}
    </view>
    <view class="username">
      {{ name }}负责人：{{ obj.username }}
    </view>
    <view class="join-count">
      最大可加入人数：{{ obj.maxJoinCount }}
    </view>
    <view class="join-count">
      已加入人数：{{obj.joinCount }}
    </view>
    <view class="info">
      可通过扫码和输入邀请码加入{{ name }}
    </view>
    <view  class="red">
      每刷新一次邀请码会改变，旧的邀请码依然可以使用
    </view>
    <view class="invent-code">
      {{ name }}邀请码：{{ obj.inventCode }}
    </view>
    <view class="qr-code" @click="previewImage">
      <u-image width="300rpx" height="300rpx" :src="obj.inventQrCodePath"></u-image>
    </view>
    <view class="btn">
      <u-button size="medium" shape="circle" type="primary" @click="exit" :ripple="true" ripple-bg-color="#a0cfff">解散 {{ name }}</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "courseOrClazzInfo",
  data() {
    return {
      obj: {
        avatar: '',
        name: '',
        username: '',
        maxJoinCount: '',
        joinCount: '',
        inventCode: '',
        inventQrCodePath: ''
      },
      isShow: false,
      // 模态框
      show: false,
      content: "您确定要解散" + this.name + "吗？"
    };
  },
  props: {
    isCourse: {
      type: Boolean,
      default: true
    },
    name: {
      type:String,
      default: '课程'
    },
    objId: {
      type:String,
      required: true
    }
  },
  created() {
    if (this.isCourse){
      this.$u.api.getCourseById(this.objId).then(res => {
        this.obj = res.data;
        this.isShow = true;
      })
    }else {
      this.$u.api.getClazzVoById(this.objId).then(res => {
        this.obj = res.data;
        this.isShow = true;
      })
    }
  },
  methods:{
    previewImage(){
      let imgArr = [];
      imgArr.push(this.obj.inventQrCodePath);
      //预览图片
      uni.previewImage({
        urls: imgArr,
        current: imgArr[0]
      });

    },
    // 解散班级或课程
    exit(){
      this.show = true;
    },
    confirm(){
      if (this.isCourse){
        this.$u.api.deleteCourse(this.objId).then(res => {
          if (res.code === 200){
            uni.$emit("indexInitial");
            this.$u.toast("解散成功！")
            setTimeout(() => {
              uni.switchTab({
                url:'/pages/index/index',
                fail: (err) => {
                  this.$u.toast('跳转出错');
                }
              })
            },1000)
          }
        })
      }else {
        this.$u.api.deleteClazz(this.objId).then(res => {
          if (res.code === 200){
            this.$u.toast("解散成功！")
            uni.switchTab({
              url:'/pages/mine/mine',
              fail: (err) => {
                this.$u.toast('跳转出错');
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss">
.obj {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 200rpx;
  font-weight: bolder;
  font-size: 30rpx;
  .avatar {
    text-align: center;
    margin: 0 auto;
  }
  view {
    margin-top: 20rpx;
  }
  .qr-code {
    margin: 0 auto;
  }
  .name {
    margin-top: 25rpx;
    color: #19be6b;

  }

  .username{
    margin-top: 20rpx;
    color: #2B85E4;
  }
  .join-count {
    margin-top: 15rpx;
    color: #ab6360;
    margin-bottom: 20rpx;
  }
  .info {
    color: #19be6b;
  }

  .red {
    color: #9c1712;
  }

  .invent-code {
    color: #2B85E4;
  }
}
.btn{
  text-align: center;
  margin-top: 20rpx;
  margin-bottom: 30rpx
}

</style>
